import { Terms } from './Term';
import _ from 'lodash';
let chartOptions = {
  instanceCode: 'fas_bar_chartcb6a6b',
  hideLabel: true,
  visible: true,
  style: {
    hasValue: true,
    style: '    opacity:100% ',
    classList: [],
  },
  // width: "100%",
  height: '300px',
  paramValue: '',
  dataSource: {
    hasValue: true,
    DataType: 0,
    DataBind:
      'DataQuery.DQ_funnel_chart(PageIndex,PageSize,AdvancedFilter,AdvancedSort).List',
    DataSource: '6a318418-f6bf-45a8-a93d-929882be44c2',
    ActionType: 3,
    DataSourceType: 'Action',
    Parameters: [
      {
        ID: '72419a47-277c-2998-5a9d-7083b6bb609c',
        Code: 'PageIndex',
        Name: Terms.config.pageIndex,
        Value: null,
        dataType: 'Int',
        ExprExt: {
          IsSysDefault: true,
        },
      },
      {
        ID: '6cb7b315-8adb-9099-58a8-2f7a76548cc9',
        Code: 'PageSize',
        Name: Terms.config.pageSize,
        Value: null,
        dataType: 'Int',
        ExprExt: {
          IsSysDefault: true,
        },
      },
      {
        ID: '67c94568-8685-3529-22b0-000787968767',
        Code: 'AdvancedFilter',
        Name: Terms.config.queryFilter,
        Value: null,
        dataType: 'String',
        ExprExt: {
          IsSysDefault: true,
        },
      },
      {
        ID: 'bf81fdb0-7ed8-a137-026b-7b7d41010c76',
        Code: 'AdvancedSort',
        Name: Terms.config.sort,
        Value: null,
        dataType: 'String',
        ExprExt: {
          IsSysDefault: true,
        },
      },
    ],
    LoadDataTime: false,
  },
  echartConfig: {
    textStyle: {
      fontFamily: 'AlibabaPuHuiTi',
    },
    dataset: {
      source: [
        {
          Name: 'PPtNzW',
          Number: 212,
        },
        {
          Name: 'JWawfN',
          Number: 286,
        },
        {
          Name: 'HmbYSw',
          Number: 831,
        },
        {
          Name: 'AmGDdD',
          Number: 617,
        },
        {
          Name: 'Bhrdpw',
          Number: 617,
        },
      ],
    },
    vm: [
      {
        value: 'ID',
        label: '主键ID',
        valueType: 9,
      },
      {
        value: 'Name',
        label: '用户行为',
        valueType: 9,
      },
      {
        value: 'Number',
        label: '次数',
        valueType: 2,
      },
      {
        value: 'Creator',
        label: '创建人',
        valueType: 9,
      },
      {
        value: 'CreatorName',
        label: '创建人姓名',
        valueType: 9,
      },
      {
        value: 'CreateTime',
        label: '创建时间',
        valueType: 5,
      },
      {
        value: 'LastModifier',
        label: '最后修改人',
        valueType: 9,
      },
      {
        value: 'LastModifierName',
        label: '最后修改人姓名',
        valueType: 9,
      },
      {
        value: 'LastModifyTime',
        label: '最后修改时间',
        valueType: 6,
      },
    ],
    timer: '2022-08-29T08:04:09.087Z',
    echartType: 'bar',
    echartName: Terms.title.histogram,
    title: {
      text: 'Referer of a Website',
      show: true,
      textStyle: {
        color: '#333',
        fontSize: 14,
        fontWeight: 'normal',
      },
      subtext: 'Fake Data',
      subtextStyle: {
        color: '#aaa',
        fontSize: 12,
        fontWeight: 'normal',
      },
      left: 'center',
    },
    tooltip: {
      show: true,
      trigger: 'axis',
      axisPointer: {
        type: 'line',
      },
      textStyle: {
        color: '#333',
        fontSize: 14,
        fontWeight: 'normal',
      },
      triggerOn: 'mousemove|click',
      confine: true,
      backgroundColor: '#ffffff',
      order: 'seriesAsc',
    },
    legend: {
      type: 'scroll',
      show: true,
      orient: 'horizontal',
      left: 'left',
      itemGap: 10,
      selected: {},
      icon: 'rect',
      top: 0,
    },
    series: [
      {
        name: Terms.title.histogram,
        type: 'bar',
        xAxisIndex: 0,
        yAxisIndex: 0,
        polymerization: '',
        stack: '',
        label: {
          show: false,
          color: null,
          position: 'top',
          distance: 5,
          rotate: 0,
          fontSize: 12,
        },
        itemStyle: {
          color: null,
          borderColor: null,
          borderWidth: 0,
        },
        emphasis: {
          focus: 'none',
        },
        dataSort: '',
        encodeTemp: {
          temp_x: 'Name',
          temp_y: 'Number',
          group: '',
        },
        encode: {
          x: 'Name',
          y: 'Number',
        },
        barWidth: 0,
        barMaxWidth: 40,
        barMinWidth: 0,
        symbol: 'emptyCircle',
        symbolSize: 4,
        connectNulls: false,
        step: false,
        lineStyle: {
          color: null,
          width: 2,
          type: 'solid',
          shadowBlur: 0,
          shadowColor: null,
        },
        areaStyle: {
          opacity: 0,
          color: null,
          origin: 'auto',
        },
        smooth: false,
        dataSortY: '',
      },
    ],
    jumpTo: {
      jump: '',
      jumpPage: '',
      jumpPageName: '',
      jumpPageParam: '',
      jumpExpress: '',
    },
    color: [
      '#5470c6',
      '#91cc75',
      '#fac858',
      '#ee6666',
      '#73c0de',
      '#3ba272',
      '#fc8452',
      '#9a60b4',
      '#ea7ccc',
      '#e4a785',
    ],
    grid: {
      show: false,
      backgroundColor: 'transparent',
      backgroundColorValue: null,
      left: '10%',
      top: '15%',
      right: '5%',
      bottom: '10%',
      leftValue: 10,
      topValue: 15,
      rightValue: 5,
      bottomValue: 10,
      containLabel: false,
    },
    xAxis: [
      {
        show: true,
        gridIndex: 0,
        type: 'category',
        name: '',
        nameGap: 15,
        inverse: false,
        boundaryGap: true,
        axisLine: {
          show: true,
          onZero: true,
          lineStyle: {
            color: '#333',
            width: 1,
            type: 'solid',
          },
        },
        axisTick: {
          show: true,
          alignWithLabel: false,
        },
        axisLabel: {
          show: true,
          rotate: 0,
          color: null,
          fontSize: 12,
          fontLength: 0,
        },
        splitLine: {
          show: false,
          lineStyle: {
            color: null,
            width: 1,
            type: 'solid',
          },
        },
      },
    ],
    yAxis: [
      {
        show: true,
        gridIndex: 0,
        type: 'value',
        name: '',
        nameGap: 15,
        inverse: false,
        boundaryGap: true,
        axisLine: {
          show: false,
          onZero: true,
          lineStyle: {
            color: '#333',
            width: 1,
            type: 'solid',
          },
        },
        axisTick: {
          show: false,
          alignWithLabel: false,
        },
        axisLabel: {
          show: true,
          rotate: 0,
          color: '#000000',
          fontSize: 12,
          fontLength: 0,
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#ccc',
            width: 1,
            type: 'solid',
          },
        },
      },
    ],
  },
  remoteFunc: 'func_fasBarChart_1661757075475',
  remoteOption: 'option_fasBarChart_1661757075475',
  tableColumn: false,
};

function formatterCB(params, ticket, callback) {
  let p = _.isArray(params) ? params[0] : params;
  let val = _.find(_.values(p.data), _.isNumber);

  let bitLen = 3;
  let l = (`${val}`.split('.')[1] || '').length;

  l = l > bitLen ? bitLen : l;

  // return `${p.name} ${ ["line","bar","strip"].includes(p.seriesType) ? "<br>" : ""} ${p.marker} ${p.seriesName} ${val.toFixed(l)}`

  // return `${p.name} <br> ${p.marker} ${val.toFixed(l)}`
  let stringVal = (+val.toFixed(l)).toLocaleString(
    readCookie('teld_locale') || '',
  );
  return `${p.name} <br> ${p.marker} ${stringVal}`;
}

let fasBarChart = {
  textStyle: {
    fontFamily: 'AlibabaPuHuiTi',
  },
  dataset: {
    source: [
      {
        Name: 'PPtNzW',
        Number: 212,
      },
      {
        Name: 'JWawfN',
        Number: 286,
      },
      {
        Name: 'HmbYSw',
        Number: 831,
      },
      {
        Name: 'AmGDdD',
        Number: 617,
      },
      {
        Name: 'Bhrdpw',
        Number: 617,
      },
    ],
  },
  vm: [
    {
      value: 'ID',
      label: '主键ID',
      valueType: 9,
    },
    {
      value: 'Name',
      label: '用户行为',
      valueType: 9,
    },
    {
      value: 'Number',
      label: '次数',
      valueType: 2,
    },
    {
      value: 'Creator',
      label: '创建人',
      valueType: 9,
    },
    {
      value: 'CreatorName',
      label: '创建人姓名',
      valueType: 9,
    },
    {
      value: 'CreateTime',
      label: '创建时间',
      valueType: 5,
    },
    {
      value: 'LastModifier',
      label: '最后修改人',
      valueType: 9,
    },
    {
      value: 'LastModifierName',
      label: '最后修改人姓名',
      valueType: 9,
    },
    {
      value: 'LastModifyTime',
      label: '最后修改时间',
      valueType: 6,
    },
  ],
  timer: '2022-08-29T08:04:09.087Z',
  echartType: 'bar',
  echartName: Terms.title.histogram,
  title: {
    text: '',
    show: false,
    textStyle: {
      color: '#333',
      fontSize: 14,
      fontWeight: 'normal',
    },
    subtext: 'Fake Data',
    subtextStyle: {
      color: '#aaa',
      fontSize: 12,
      fontWeight: 'normal',
    },
    left: 'center',
  },
  tooltip: {
    show: true,
    trigger: 'axis',
    axisPointer: {
      type: 'line',
    },
    textStyle: {
      color: '#333',
      fontSize: 14,
      fontWeight: 'normal',
    },
    triggerOn: 'mousemove|click',
    confine: true,
    backgroundColor: '#ffffff',
    order: 'seriesAsc',
    formatterCB,
  },
  legend: {
    // type: 'scroll',
    // "show": false,
    // orient: "horizontal",
    // left: "left",
    // itemGap: 10,
    // selected: {},
    // icon: "rect",
    // top: 0,
    type: 'scroll',
    orient: 'horizontal',
    right: 10,
    top: 20,
    bottom: 20,
  },
  series: [
    {
      name: Terms.title.histogram,
      type: 'bar',
      xAxisIndex: 0,
      yAxisIndex: 0,
      polymerization: '',
      stack: '',
      label: {
        show: false,
        color: null,
        position: 'top',
        distance: 5,
        rotate: 0,
        fontSize: 12,
      },
      itemStyle: {
        color: null,
        borderColor: null,
        borderWidth: 0,
      },
      emphasis: {
        focus: 'none',
      },
      dataSort: '',
      encodeTemp: {
        temp_x: 'Name',
        temp_y: 'Number',
        group: '',
      },
      encode: {
        x: 'Name',
        y: 'Number',
      },
      barWidth: 0,
      barMaxWidth: 40,
      barMinWidth: 0,
      symbol: 'emptyCircle',
      symbolSize: 4,
      connectNulls: false,
      step: false,
      lineStyle: {
        color: null,
        width: 2,
        type: 'solid',
        shadowBlur: 0,
        shadowColor: null,
      },
      areaStyle: {
        opacity: 0,
        color: null,
        origin: 'auto',
      },
      smooth: false,
      dataSortY: '',
    },
  ],
  jumpTo: {
    jump: '',
    jumpPage: '',
    jumpPageName: '',
    jumpPageParam: '',
    jumpExpress: '',
  },
  color: [
    'rgb(240, 68, 74)',
    'rgb(248, 170, 13)',
    'rgb(49, 198, 143)',
    'rgb(113, 104, 253)',
    'rgb(27, 130, 244)',
    '#5470c6',
    '#91cc75',
    '#fac858',
    '#ee6666',
    '#73c0de',
    '#3ba272',
    '#fc8452',
    '#9a60b4',
    '#ea7ccc',
    '#e4a785',
  ],
  grid: {
    show: false,
    backgroundColor: 'transparent',
    backgroundColorValue: null,
    left: '10%',
    top: '15%',
    right: '5%',
    bottom: '10%',
    leftValue: 10,
    topValue: 15,
    rightValue: 5,
    bottomValue: 10,
    containLabel: false,
  },
  xAxis: [
    {
      show: true,
      gridIndex: 0,
      type: 'category',
      name: '',
      nameGap: 15,
      inverse: false,
      boundaryGap: true,
      axisLine: {
        show: true,
        onZero: true,
        lineStyle: {
          color: '#333',
          width: 1,
          type: 'solid',
        },
      },
      axisTick: {
        show: true,
        alignWithLabel: false,
      },
      axisLabel: {
        show: true,
        rotate: 0,
        color: null,
        fontSize: 12,
        fontLength: 0,
      },
      splitLine: {
        show: false,
        lineStyle: {
          color: null,
          width: 1,
          type: 'solid',
        },
      },
    },
  ],
  yAxis: [
    {
      show: true,
      gridIndex: 0,
      type: 'value',
      name: '',
      nameGap: 15,
      inverse: false,
      boundaryGap: true,
      axisLine: {
        show: false,
        onZero: true,
        lineStyle: {
          color: '#333',
          width: 1,
          type: 'solid',
        },
      },
      axisTick: {
        show: false,
        alignWithLabel: false,
      },
      axisLabel: {
        show: true,
        rotate: 0,
        color: '#000000',
        fontSize: 12,
        fontLength: 0,
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#ccc',
          width: 1,
          type: 'solid',
        },
      },
    },
  ],
};

let fasPieChart = {
  timer: '2022-08-29T08:04:09.087Z',
  textStyle: {
    fontFamily: 'AlibabaPuHuiTi',
  },
  dataset: {
    source: [
      // {
      //     "Name": "KnbjPj",
      //     "Number": 205
      // },
      // {
      //     "Name": "JRawrk",
      //     "Number": 317
      // },
      // {
      //     "Name": "RbXRsM",
      //     "Number": 21
      // },
      // {
      //     "Name": "YyrXbn",
      //     "Number": 939
      // },
      // {
      //     "Name": "RDRYEC",
      //     "Number": 86
      // }
    ],
  },
  vm: [
    // {
    //     "value": "ID",
    //     "label": "主键ID",
    //     "valueType": 9
    // },
    // {
    //     "value": "Name",
    //     "label": "用户行为",
    //     "valueType": 9
    // },
    // {
    //     "value": "Number",
    //     "label": "次数",
    //     "valueType": 2
    // },
    // {
    //     "value": "Creator",
    //     "label": "创建人",
    //     "valueType": 9
    // },
    // {
    //     "value": "CreatorName",
    //     "label": "创建人姓名",
    //     "valueType": 9
    // },
    // {
    //     "value": "CreateTime",
    //     "label": "创建时间",
    //     "valueType": 5
    // },
    // {
    //     "value": "LastModifier",
    //     "label": "最后修改人",
    //     "valueType": 9
    // },
    // {
    //     "value": "LastModifierName",
    //     "label": "最后修改人姓名",
    //     "valueType": 9
    // },
    // {
    //     "value": "LastModifyTime",
    //     "label": "最后修改时间",
    //     "valueType": 6
    // }
  ],
  // "timer": "2022-09-01T10:16:10.534Z",
  echartType: 'pie',
  echartName: '饼图',
  // "title": {
  //     "text": "Referer of a Website",timer: "2022-08-29T08:04:09.087Z",
  //     "show": true,
  //     "textStyle": {
  //         "color": "#333",
  //         "fontSize": 14,
  //         "fontWeight": "normal"
  //     },
  //     "subtext": "Fake Data",
  //     "subtextStyle": {
  //         "color": "#aaa",
  //         "fontSize": 12,
  //         "fontWeight": "normal"
  //     },
  //     "left": "center"
  // },
  // "label":{show:true},
  tooltip: {
    show: true,
    trigger: 'item',
    axisPointer: {
      type: 'none',
    },
    textStyle: {
      color: '#333',
      fontSize: 14,
      fontWeight: 'normal',
    },
    triggerOn: 'mousemove|click',
    confine: true,
    backgroundColor: '#ffffff',
    order: 'seriesAsc',
    formatterCB,
  },
  legend: {
    type: 'scroll',
    show: true,
    // "orient": "vertical",
    left: 'center',
    itemGap: 10,
    selected: {},
    icon: 'roundRect',
    bottom: 0,
  },
  series: [
    {
      // "name": "Access From",
      type: 'pie',
      bottom: 10,
      top: 0,
      // bottom: "10%",
      radius: ['0%', '60%'],
      radiusInnerValue: 0,
      radiusOuterValue: 50,
      polymerization: '',
      dataSort: '',
      encodeTemp: {
        temp_x: 'PID',
        temp_y: 'Progress',
        group: '',
      },
      encode: {
        itemName: 'PID',
        value: 'Progress',
      },
      label: {
        show: true,
        color: null,
        position: 'outside',
        fontSize: 12,
        fontWeight: 'normal',
        width: 100,
        overflow: 'none',
        // "formatter": "{@Progress}",
        // "formatterText": "{c}",
        // "formatterValue": "1"
      },
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
        },
      },
      dataSortY: '',
    },
  ],
  jumpTo: {
    jump: '',
    jumpPage: '',
    jumpPageName: '',
    jumpPageParam: '',
    jumpExpress: '',
  },
  color: [
    'rgb(27, 130, 244)',
    'rgb(240, 68, 74)',
    'rgb(248, 170, 13)',
    'rgb(49, 198, 143)',
    'rgb(113, 104, 253)',
    '#5470c6',
    '#91cc75',
    '#fac858',
    '#ee6666',
    '#73c0de',
    '#3ba272',
    '#fc8452',
    '#9a60b4',
    '#ea7ccc',
    '#e4a785',
  ],
  xAxis: [
    {
      show: false,
      gridIndex: 0,
      type: 'category',
      name: '状态',
      nameGap: 15,
      inverse: false,
      axisLine: {
        show: true,
        onZero: true,
        lineStyle: {
          color: '#333',
          width: 1,
          type: 'solid',
        },
      },

      axisTick: {
        show: true,
        alignWithLabel: false,
      },
      axisLabel: {
        show: true,
        rotate: 0,
        color: null,
        fontSize: 12,
        fontLength: 0,
      },

      splitLine: {
        show: false,

        lineStyle: {
          color: null,

          width: 1,

          type: 'solid',
        },
      },
    },
  ],

  yAxis: [
    {
      show: false,

      gridIndex: 0,

      type: 'value',

      name: '数量',

      nameGap: 10,

      inverse: false,

      axisLine: {
        show: false,

        onZero: true,

        lineStyle: {
          color: '#333',

          width: 0,

          type: 'solid',
        },
      },

      axisTick: {
        show: true,

        alignWithLabel: false,
      },

      axisLabel: {
        show: true,

        rotate: 0,

        color: '#000000',

        fontSize: 12,

        fontLength: 0,
      },

      splitLine: {
        show: true,

        lineStyle: {
          color: '#ccc',

          width: 1,

          type: 'solid',
        },
      },
    },
  ],
};

let fasStripChart = {
  textStyle: {
    fontFamily: 'AlibabaPuHuiTi',
  },
  dataset: {},
  vm: [],
  timer: '2022-09-03T08:10:19.178Z',
  echartType: 'strip',
  echartName: '条形图',
  title: {
    text: 'Referer of a Website',
    show: false,
    textStyle: {
      color: '#333',
      fontSize: 14,
      fontWeight: 'normal',
    },
    subtext: 'Fake Data',
    subtextStyle: {
      color: '#aaa',
      fontSize: 12,
      fontWeight: 'normal',
    },
    left: 'center',
  },
  tooltip: {
    show: true,
    trigger: 'axis',
    axisPointer: {
      type: 'line',
    },
    textStyle: {
      color: '#333',
      fontSize: 14,
      fontWeight: 'normal',
    },
    triggerOn: 'mousemove|click',
    confine: true,
    backgroundColor: '#ffffff',
    order: 'seriesAsc',
    formatterCB,
  },
  legend: {
    type: 'scroll',
    show: false,
    orient: 'horizontal',
    left: 'left',
    itemGap: 10,
    selected: {},
    icon: 'rect',
    top: 0,
  },
  series: [
    {
      name: '条形图',
      type: 'bar',
      xAxisIndex: 0,
      yAxisIndex: 0,
      polymerization: '',
      stack: '',
      label: {
        show: false,
        color: null,
        position: 'top',
        distance: 5,
        rotate: 0,
        fontSize: 12,
      },
      itemStyle: {
        color: null,
        borderColor: null,
        borderWidth: 0,
      },
      emphasis: {
        focus: 'none',
      },
      dataSort: '1',
      encodeTemp: {
        temp_x: 'Number',
        temp_y: 'Name',
        group: '',
      },
      encode: {
        x: 'Number',
        y: 'Name',
      },
      barWidth: 0,
      barMaxWidth: 40,
      barMinWidth: 0,
      symbol: 'emptyCircle',
      symbolSize: 4,
      connectNulls: false,
      step: false,
      lineStyle: {
        color: null,
        width: 2,
        type: 'solid',
        shadowBlur: 0,
        shadowColor: null,
      },
      areaStyle: {
        opacity: 0,
        color: null,
        origin: 'auto',
      },
      smooth: false,
      dataSortY: '1',
    },
  ],
  jumpTo: {
    jump: '',
    jumpPage: '',
    jumpPageName: '',
    jumpPageParam: '',
    jumpExpress: '',
  },
  color: [
    'rgb(248, 170, 13)',
    'rgb(49, 198, 143)',
    'rgb(113, 104, 253)',
    'rgb(27, 130, 244)',
    'rgb(240, 68, 74)',
    '#5470c6',
    '#91cc75',
    '#fac858',
    '#ee6666',
    '#73c0de',
    '#3ba272',
    '#fc8452',
    '#9a60b4',
    '#ea7ccc',
    '#e4a785',
  ],
  grid: {
    show: false,
    backgroundColor: 'transparent',
    backgroundColorValue: null,
    left: '10%',
    top: '15%',
    right: '5%',
    bottom: '5%',
    leftValue: 10,
    topValue: 15,
    rightValue: 5,
    bottomValue: 10,
    containLabel: true,
  },
  xAxis: [
    {
      show: true,
      gridIndex: 0,
      type: 'value',
      name: '',
      nameGap: 15,
      inverse: false,
      boundaryGap: true,
      axisLine: {
        show: false,
        onZero: true,
        lineStyle: {
          color: '#333',
          width: 1,
          type: 'solid',
        },
      },
      axisTick: {
        show: false,
        alignWithLabel: false,
      },
      axisLabel: {
        show: true,
        rotate: 0,
        color: '#000000',
        fontSize: 12,
        fontLength: 0,
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#ccc',
          width: 1,
          type: 'solid',
        },
      },
    },
  ],
  yAxis: [
    {
      show: true,
      gridIndex: 0,
      type: 'category',
      name: '',
      nameGap: 15,
      inverse: false,
      boundaryGap: true,
      axisLine: {
        show: true,
        onZero: true,
        lineStyle: {
          color: '#333',
          width: 1,
          type: 'solid',
        },
      },
      axisTick: {
        show: true,
        alignWithLabel: false,
      },
      axisLabel: {
        show: true,
        rotate: 0,
        color: null,
        fontSize: 12,
        fontLength: 0,
      },
      splitLine: {
        show: false,
        lineStyle: {
          color: null,
          width: 1,
          type: 'solid',
        },
      },
    },
  ],
};

let fasFunnelChart = {
  textStyle: {
    fontFamily: 'AlibabaPuHuiTi',
  },
  dataset: {
    source: [],
  },
  vm: [],
  timer: '2022-09-03T08:19:40.979Z',
  echartType: 'funnel',
  echartName: '漏斗图',
  title: {
    text: '',
    show: false,
    textStyle: {
      color: '#333',
      fontSize: 14,
      fontWeight: 'normal',
    },
    subtext: 'Fake Data',
    subtextStyle: {
      color: '#aaa',
      fontSize: 12,
      fontWeight: 'normal',
    },
    left: 'center',
  },
  tooltip: {
    show: true,
    trigger: 'item',
    axisPointer: {
      type: 'none',
    },
    textStyle: {
      color: '#333',
      fontSize: 14,
      fontWeight: 'normal',
    },
    triggerOn: 'mousemove|click',
    confine: true,
    backgroundColor: '#ffffff',
    order: 'seriesAsc',
    formatterCB,
  },
  legend: {
    type: 'scroll',
    show: true,
    orient: 'vertical',
    left: 'left',
    itemGap: 10,
    selected: {},
    icon: 'rect',
    top: 0,
  },
  series: [
    {
      name: '',
      type: 'funnel',
      left: 80,
      top: 60,
      right: 80,
      bottom: 60,
      minSize: '0%',
      minSizeValue: 0,
      maxSizeValue: 100,
      maxSize: '100%',
      orient: 'vertical',
      sort: 'descending',
      gap: 0,
      funnelAlign: 'center',
      label: {
        show: true,
        color: null,
        position: 'outside',
        fontSize: 12,
        fontWeight: 'normal',
        width: 100,
        overflow: 'none',
        formatter: '{@sum_Number}',
        formatterText: '{c}',
        formatterValue: '1',
      },
      labelLine: {
        show: false,
        length: 10,
        lineStyle: {
          width: 1,
          type: 'solid',
        },
      },
      emphasis: {
        focus: 'none',
      },
      polymerization: 'sum',
      dataSort: '',
      encodeTemp: {
        temp_x: 'Name',
        temp_y: 'Number',
        group: '',
      },
      encode: {
        itemName: 'Name',
        value: 'sum_Number',
      },
      dataSortY: '',
    },
  ],
  jumpTo: {
    jump: '',
    jumpPage: '',
    jumpPageName: '',
    jumpPageParam: '',
    jumpExpress: '',
  },
  color: [
    'rgb(248, 170, 13)',
    'rgb(49, 198, 143)',
    'rgb(113, 104, 253)',
    'rgb(27, 130, 244)',
    'rgb(240, 68, 74)',
    '#5470c6',
    '#91cc75',
    '#fac858',
    '#ee6666',
    '#73c0de',
    '#3ba272',
    '#fc8452',
    '#9a60b4',
    '#ea7ccc',
    '#e4a785',
  ],
};

let fasLineChart = {
  textStyle: {
    fontFamily: 'AlibabaPuHuiTi',
  },
  dataset: {
    source: [],
  },
  vm: [],
  timer: '2022-09-03T08:25:25.056Z',
  echartType: 'line',
  echartName: '折线图',
  title: {
    text: 'Referer of a Website',
    show: false,
    textStyle: {
      color: '#333',
      fontSize: 14,
      fontWeight: 'normal',
    },
    subtext: 'Fake Data',
    subtextStyle: {
      color: '#aaa',
      fontSize: 12,
      fontWeight: 'normal',
    },
    left: 'center',
  },
  tooltip: {
    show: true,
    trigger: 'axis',
    axisPointer: {
      type: 'line',
    },
    textStyle: {
      color: '#333',
      fontSize: 14,
      fontWeight: 'normal',
    },
    triggerOn: 'mousemove|click',
    confine: true,
    backgroundColor: '#ffffff',
    order: 'seriesAsc',
    formatterCB,
  },
  legend: {
    type: 'scroll',
    show: false,
    orient: 'horizontal',
    left: 'left',
    itemGap: 10,
    selected: {},
    icon: 'rect',
    top: 0,
  },
  series: [
    {
      name: '折线图',
      type: 'line',
      xAxisIndex: 0,
      yAxisIndex: 0,
      polymerization: 'sum',
      stack: '',
      label: {
        show: false,
        color: null,
        position: 'top',
        distance: 5,
        rotate: 0,
        fontSize: 12,
      },
      itemStyle: {
        color: null,
        borderColor: null,
        borderWidth: 0,
      },
      emphasis: {
        focus: 'none',
      },
      dataSort: '',
      encodeTemp: {
        temp_x: 'Name',
        temp_y: 'Number',
        group: '',
      },
      encode: {
        x: 'Name',
        y: 'sum_Number',
      },
      barWidth: 0,
      barMaxWidth: 40,
      barMinWidth: 0,
      symbol: 'emptyCircle',
      symbolSize: 4,
      connectNulls: false,
      step: false,
      lineStyle: {
        color: null,
        width: 2,
        type: 'solid',
        shadowBlur: 0,
        shadowColor: null,
      },
      areaStyle: {
        opacity: 0,
        color: null,
        origin: 'auto',
      },
      smooth: false,
      dataSortY: '',
    },
  ],
  jumpTo: {
    jump: '',
    jumpPage: '',
    jumpPageName: '',
    jumpPageParam: '',
    jumpExpress: '',
  },
  color: [
    'rgb(49, 198, 143)',
    'rgb(113, 104, 253)',
    'rgb(27, 130, 244)',
    'rgb(240, 68, 74)',
    'rgb(248, 170, 13)',
    '#5470c6',
    '#91cc75',
    '#fac858',
    '#ee6666',
    '#73c0de',
    '#3ba272',
    '#fc8452',
    '#9a60b4',
    '#ea7ccc',
    '#e4a785',
  ],
  grid: {
    show: false,
    backgroundColor: 'transparent',
    backgroundColorValue: null,
    left: '10%',
    top: '15%',
    right: '5%',
    bottom: '10%',
    leftValue: 10,
    topValue: 15,
    rightValue: 5,
    bottomValue: 10,
    containLabel: false,
  },
  xAxis: [
    {
      show: true,
      gridIndex: 0,
      type: 'category',
      name: '',
      nameGap: 15,
      inverse: false,
      boundaryGap: true,
      axisLine: {
        show: true,
        onZero: true,
        lineStyle: {
          color: '#333',
          width: 1,
          type: 'solid',
        },
      },
      axisTick: {
        show: true,
        alignWithLabel: false,
      },
      axisLabel: {
        show: true,
        rotate: 0,
        color: null,
        fontSize: 12,
        fontLength: 0,
      },
      splitLine: {
        show: false,
        lineStyle: {
          color: null,
          width: 1,
          type: 'solid',
        },
      },
    },
  ],
  yAxis: [
    {
      show: true,
      gridIndex: 0,
      type: 'value',
      name: '',
      nameGap: 15,
      inverse: false,
      boundaryGap: true,
      axisLine: {
        show: false,
        onZero: true,
        lineStyle: {
          color: '#333',
          width: 1,
          type: 'solid',
        },
      },
      axisTick: {
        show: false,
        alignWithLabel: false,
      },
      axisLabel: {
        show: true,
        rotate: 0,
        color: '#000000',
        fontSize: 12,
        fontLength: 0,
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#ccc',
          width: 1,
          type: 'solid',
        },
      },
    },
  ],
};

export { chartOptions };

export function vBindChartOpts(conf) {
  let chartOpt = _.cloneDeep(chartOptions);
  // chartOpt.instanceCode = `${this.options.instanceCode}_chart_${index}`;
  let config = _.cloneDeep(EchartConfig[conf.ChartType]);
  if (config) {
    let serieConf = config.series[0];
    if (true) {
      serieConf.polymerization = conf.Aggregation;
      serieConf.dataSort = conf.SortType;
      serieConf.encodeTemp = {
        temp_x: conf.GroupColumn,
        temp_y: conf.AggregationFiled,
        group: conf.AggDateValue, // 日期分组
      };
      serieConf.encode = {
        itemName: conf.GroupColumn,
        value: conf.AggregationFiled,
        x: conf.GroupColumn,
        y: conf.AggregationFiled,
      };
      if (serieConf.polymerization) {
        serieConf.encode.value =
          serieConf.encode.y = `${serieConf.polymerization}_${conf.AggregationFiled}`;
      }

      if (conf.ChartType == 'fas-strip-chart') {
        let x = serieConf.encode.x;
        serieConf.encode.x = serieConf.encode.y;
        serieConf.encode.y = x;

        let temp_x = serieConf.encodeTemp.temp_x;
        serieConf.encodeTemp.temp_x = serieConf.encodeTemp.temp_y;
        serieConf.encodeTemp.temp_y = temp_x;

        let itemName = serieConf.encode.itemName;
        serieConf.encode.itemName = serieConf.encode.value;
        serieConf.encode.itemName = itemName;
      }

      if (
        conf.ChartType == 'fas-pie-chart' ||
        conf.ChartType == 'fas-funnel-chart'
      ) {
        delete serieConf.encode.x;
        delete serieConf.encode.y;
      }

      // { value: "name", label: "标签", valueType: 9 },
      // { value: "value", label: "值", valueType: 2 },
      if (conf.SortType == 'name') {
        serieConf.dataSort = conf.DataSort; // x排序
      } else if (conf.SortType == 'value') {
        serieConf.dataSortY = conf.DataSort; // x排序
      }
    }
    chartOpt.echartConfig = config;
  }
  // console.log("this.ctrlBindValuethis.ctrlBindValue", this.dataSource);
  return {
    // options: chartOpt,
    option: chartOpt.echartConfig,
    // data: props.data,
  };
}

const EchartConfig = {
  'fas-bar-chart': fasBarChart,
  'fas-pie-chart': fasPieChart,
  'fas-line-chart': fasLineChart,
  'fas-strip-chart': fasStripChart,
  'fas-funnel-chart': fasFunnelChart,
};

export default EchartConfig;
